<script setup>
import {reactive, ref} from "vue";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";

let data = reactive(({
  // 所有的表单数据由它装入
  form:{},
  disPatchinfoList:[],
  dialogDelVisible:false,
}));
/**
 * 查询所有的公司信息
 */
const queryAll = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(data.form))
  // http://localhost:8080
  uu.post("/busDispatchInfo/pageList",data.form).then(result =>{
    data.disPatchinfoList = result.data.list;
    data.form.pageNum = result.data.pageNum;
    data.form.pageSize = result.data.pageSize;
    data.form.total = result.data.total;
    console.log("接收到的数据为"+JSON.stringify(result.data));
  })
}
queryAll()
/**
 * 改变页码
 * @param value
 */
const pagesChange = (value) => {
  // alert(value)
  //  console.log(value)
  data.pages = value;
  queryAll();
}

/**
 * 删除对话框打开时事件
 * @param row
 */
const delBusiness = (row) => {
  // alert(data.form.claimReportId)
  // 开启对话框
  data.form = {}
  data.dialogDelVisible = true;
  // 当前的行信息赋值给 form 对象 这其中就包含id
  data.form.id = row.id;
  data.form.claimReport = row.claimReport;
}
/*
  删除调度信息记录
 */
const handleDelete = (ruleFormRef) => {
  if (!ruleFormRef) return; // 为空就结束，直观效果就是不允许点击
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
        uu.post("/busDispatchInfo/remove", data.form).then(result => {
          // alert(result.message)
          if (result.ok) {
            data.success = true; // 显示成功提示
            ElMessage({
              message: result.message,
              type: "success",
            })
            // 关闭对话框
            data.dialogDelVisible = false;
            // 清楚数据
            data.form = {}
            // 刷新页面
            queryAll()
          } else {
            ElMessage.error(result.message)// 显示失败提示
          }
        })
    }
  })
}
// 关闭 删除对话框事件
const dialogDelVisible = () => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  ruleFormRef.value.resetFields();
  // 关闭对话框
  data.dialogDelVisible= false;
}
// 添加保单验证规则
  const ruleFormRef = ref(); // 引用表单组件
  const rules = reactive({  // 验证规则对象，存储验证规则。
    revokeReason: [
      { required: true, message: '请填写撤销原因', trigger: 'blur' },
    ],
  })

</script>

<template>
  <el-form :inline="true" :model="data.form" class="demo-form-inline" style="width: 100%">
    <!-- 便捷查询区域-->
    <div>
      <el-form-item label="报案号">
        <el-input v-model="data.form.claimReportId"  placeholder="请输入公司名称"/>
      </el-form-item>
      <el-form-item label="报案时间">
        <el-date-picker
            v-model="data.form.assignTime"
            type="date"
            placeholder="Pick a day"
            size="default"
            value-format="YYYY-MM-DD"
            format="YYYY/MM/DD"
        />
      </el-form-item>
      <el-form-item label="指派状态">
        <el-select v-model="data.form.assignStatus" placeholder="请选择">
          <el-option label="正常" value="1" />
          <el-option label="撤销" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll()">调度信息查询</el-button>
      </el-form-item>
    </div>
  </el-form>
  <!-- 调度信息表格区域 -->
  <el-table :data="data.disPatchinfoList" border style="width: 100%; " >
    <el-table-column label="序号" type="index" fixed width="80" height="100" />
    <el-table-column label="报案号" prop="claimReport.claimReportId" fixed width="200" height="100" />
    <el-table-column label="被指派人" prop="surveyor.name" width="270" />
    <el-table-column label="指派人" prop="dispatcher.name" width="120" />
    <el-table-column label="指派时间" prop="assignTime" width="120" />
    <el-table-column label="备注" prop="remark" width="120" />
    <el-table-column label="指派状态" prop="assignStatus" width="120" >
      <template #default="scope">
        <el-text :label="0" v-model="scope.row.assignStatus" v-if=" scope.row.assignStatus ===0">正常</el-text>
        <el-text :label="1" v-model="scope.row.assignStatus" v-else-if=" scope.row.assignStatus ===1">撤销</el-text>
      </template>
    </el-table-column>
    <el-table-column label="查勘状态" prop="survery_state" width="120" >
      <template #default="scope">
        <el-text :label="0" v-model="scope.row.surveryState" v-if=" scope.row.surveryState ===0">未查勘</el-text>
        <el-text :label="1" v-model="scope.row.surveryState" v-else-if=" scope.row.surveryState ===1">查勘中</el-text>
        <el-text :label="1" v-model="scope.row.surveryState" v-else-if=" scope.row.surveryState ===2">已查勘</el-text>
      </template>
    </el-table-column>
    <el-table-column label="撤销原因" prop="revokeReason" width="320" />
    <el-table-column label="撤销时间" prop="revokeTime" width="220" />
    <el-table-column label="操作" fixed="right" width="150" >
      <template #default="scope">
<!--     @confirm="delBusiness(scope.row.id)"   -->
        <el-popconfirm   @confirm="delBusiness(scope.row)"  title="你确定要删除吗？">
          <template #reference>
            <el-button size="small" type="danger" v-if="scope.row.claimReport.flowState === 2" :plain="true"> 撤销调度 </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 删除原因对话框 -->
  <el-dialog
      v-model="data.dialogDelVisible"
      title=" 请填写删除原因 " width="30%"
      :before-close="dialogDelVisible"
      draggable>

    <el-form
        :model="data.form"
        ref="ruleFormRef"
        :rules="rules"
        label-width="140px">
      <el-form-item label="删除原因" prop="revokeReason">
        <el-input style="width:240px" v-model="data.form.revokeReason" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogDelVisible()">取消</el-button>
        <el-button type="primary" @click="handleDelete(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页区域 -->
  <div style="width: 100%">
    <br>
    <el-pagination
        v-model:current-page="data.form.pageNum"
        v-model:page-size="data.form.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="disabled"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.form.total"
        @size-change="pagesChange($event)"
        @current-change="pagesChange($event)"
    />
  </div>
</template>

<style scoped>

</style>